<template>
    <div :class="[[prefixCls+'-input'],size?[prefixCls+'-input-'+size]:'',isGroup?[prefixCls+'-input-group']:'']">
        <div :class="[prefixCls+'-input-group-prepend']" v-if="$slots.prepend"><slot name="prepend"></slot></div>
        <span v-if="prefix" :class="[prefixCls+'-input-prefix']"><i class="icon" :class="prefix"></i></span>
        <span v-if="suffix" :class="[prefixCls+'-input-suffix']"><i class="icon" :class="suffix"></i></span>
        <span v-if="search" :class="[prefixCls+'-input-suffix']" style="cursor:pointer;" @click="_click"><i class="icon icon-search"></i></span>
        <input 
            v-bind="$props" 
            v-model="inputValue" 
            :type="inputType" 
            :name="name" 
            :class="classes"
            v-if="type!='textarea'"
            @focus="_focus" 
            @blur="_blur" 
            @keyup="_keyup" 
            @keydown="_keydown"
            @keyup.enter="_enter">
        <span :class="[prefixCls+'-input-suffix']" v-if="clearIcon&&inputValue" @click="inputValue=''" :style="clearIcon?'cursor:pointer':''"><i class="icon icon-close"></i></span>
        <span :class="[prefixCls+'-input-suffix']" v-if="inputValue&&showEye && type=='password'" @click="eyeShow=!eyeShow" :style="showEye?'cursor:pointer':''"><i :class="['icon',{'icon-eye':eyeShow,'icon-eye-no':!eyeShow}]"></i></span>
        <span :class="[prefixCls+'-input-word-count']" v-if="maxLength">{{wordCount}}/{{maxLength}}</span>
        <textarea
           v-if="type==='textarea'"
           :class="[`${prefixCls}-textarea`,{'disabled': disabled}]"
           :placeholder="placeholder"
           :rows="autosize.minRows?autosize.minRows:rows"
           v-model="inputValue"
           :disabled="disabled"
           ref="textarea"
           @keyup="_keyup" >
        </textarea>
        <div :class="[prefixCls+'-input-group-append']" v-if="$slots.append"><slot name="append"></slot></div>
    </div>
</template>
<script>
import { prefixCls } from '../prefix'
import emitter from '../mixins/emitter'
import './input.css'

export default {
    name: `${prefixCls}Input`,
    data() {
        return {
            prefixCls: prefixCls,
            inputValue: this.value,
            inputType: this.type,
            eyeShow: false,
            wordCount: this.calculatebyte(this.value), //已输入字数，用于maxlength参数
            isGroup:this.$slots.default || this.$slots.prepend || this.$slots.append, //input组，前后有slot插槽
        }
    },
    computed: {
       classes() {
           return [
               `${prefixCls}-input-control`,
               {
                   'disabled': this.disabled,
                   [`${prefixCls}-input-control-prefix`]: this.prefix,
                   [`${prefixCls}-input-control-suffix`]: this.suffix || this.clearIcon,
                   [`${prefixCls}-input-control-count`]: this.maxLength
               }
           ]
       }
    },
    mixins: [emitter],
    watch: {
        inputValue(v) {
            this.$emit('input', v);
            // textarea 高度自适应
            if (this.autosize) {
                let el = this.$refs.textarea;
                if(typeof this.autosize === 'boolean') {
                    // textarea自适应高度，无限制
                    el.style.height = 'auto';
                    el.style.height = (el.scrollHeight + 2) + 'px';
                }else{
                    // textarea自适应高度，但有最小值和最大值限制
                    if((el.scrollHeight - 10)/21 <= this.autosize.maxRows) {
                        el.style.height = 'auto';
                        el.style.height = (el.scrollHeight + 2) + 'px';
                    }
                }
            }
            this.dispatch('formItem', 'mj.form.change', [v, ''])
        },
        eyeShow(v) {
            //显示或隐藏密码
            this.inputType = v ? 'text' : 'password';
        },
        value(v) {
            this.inputValue = v
        }
    },
    props: {
        type: {
            type: String,
            default: 'text'
        },
        placeholder: String,
        value: {
            type: [String, Number],
            default:''
        },
        disabled: {
            type: Boolean,
            default: false
        },
        readonly: {
            type: Boolean,
            default: false
        },
        maxLength: {
            type: Number,
        },
        clearIcon: {
            type: Boolean,
            default: false
        },
        showEye: {
            type: Boolean,
            default: false
        },
        prefix: {
            type: String,
        },
        suffix: {
            type: String,
        },
        rows: {
            type: Number,
            default: 2
        },
        autosize: {
            type: [Boolean , Object],
            default: false
        },
        search: {
            type: Boolean,
            default: false
        },
        name: String,
        size: String,
    },
    mounted() {
        // 设置textarea初始最小高度、高度
        // if(this.type==='textarea') {
        //     this.$nextTick(()=> {
        //         let el = this.$refs.textarea;
        //         el.style.minHeight = (el.scrollHeight + 2) + 'px';
        //         el.style.height = (el.scrollHeight + 2) + 'px';
        //     })
        // }
    },
    methods: {
        _focus(e) {
            this.$emit('focus', e);
        },
        _blur(e) {
            this.$emit('blur', e);
        },
        _keyup(e) {
            this.$emit('keyup', e);
            this.wordCount = this.calculatebyte(this.inputValue);
        },
        _keydown(e) {
            this.$emit('keydown', e);
        },
        _click(e) {
            this.$emit('click',this.inputValue);
        },
        _enter(e) {
            this.$emit('click',this.inputValue);
        },
        // 计算value值字符串长度
        calculatebyte(sTargetStr) {
            if(!this.maxLength) return false;
            var sTmpStr;
            var nOriginLen = 0;
            var nStrLength = 0;
            sTmpStr = new String(sTargetStr);
            nOriginLen = sTmpStr.length;
            if(nOriginLen <= this.maxLength) {
                nStrLength = nOriginLen;
            }else{
                nStrLength = this.maxLength
            }
            this.inputValue = sTargetStr.slice(0, this.maxLength)
            return nStrLength;
        },
    },
}
</script>